<template>
    <share-table :columns="columns" :fetch-data-list="fetchDataList" :actionColumns="actionColumns"

        :header-cell-style="styleObj">
        <template v-slot:job="{row}">
            <el-tag type="">{{ row.job }}</el-tag>
        </template>
        <template v-slot:action="{row}">
            <el-tag v-show="row.age !== 25">{{ row.name }}</el-tag>
        </template>
    </share-table>
</template>

<script>
import {Message} from "element-ui";
import { ShareTable } from "../../packages/index";
function columns(){
    return [
        // {
        //     type: "selection"
        // }, 
        {
            label: "序号",
            type: "index",
            width: 80
        },
        {
            label: "姓名",
            name: "name"
        },
        {
            label: "年龄",
            name: "age",
        },
        {
            label: "性别",
            name: "sex"
        },
        {
            label: "籍贯",
            name: "from",
            'show-overflow-tooltip':true
        },
        {
            label: "职业",
            name: "job",
            useSlot: true,
        },
        {
            label:"操作",
            name:'action',
            useSlot:true
        }
    ]
}
function actionColumns(){
    return {
        actionBtns: [
            {
                name: "修改",
                hidden:true,
                onClick:()=>{
                    Message.info("点击了修改")
                },
                icon:"el-icon-edit",
                disabled:true
            },
            {
                name: "删除",
                onClick: () => {
                    Message.info("点击了删除")
                }
            },
        ]
    }
}
export default {
    name: 'Table',
    components: {
        ShareTable
    },
    data(){
        return {
            styleObj:{
                backgroundColor:'#409EFF'
            }
        }
    },
    computed: {
        columns,
        actionColumns
    },
    methods: {
        buildHeadStyle(){
            return {
                backgroundColor: '#409EFF'
            }
        },
        // { pageNumber, pageSize }
        fetchDataList({  pageSize }) {
            // return api.getDataList({
            //     pageNumber,
            //     pageSize,
            // }).then((res)=>{
            //     const {data,total} = res;

            //     return {
            //         data: data,
            //         totalCount: total
            //     }
            // })

            return Promise.resolve({
                data: new Array(pageSize).fill(
                        {
                            name: "刘宇臻",
                            age: 18,
                            sex: "男",
                            from: "陕西省西安市陕西省西安市陕西省西安市陕西省西安市陕西省西安市陕西省西安市",
                            job: "前端开发"
                        },
                    ).map((v,index)=>({
                        id:index,
                        ...v,
                        age: v.age + index,
                    })),
                totalCount: 42
            })
        },
    }
}
</script>

<style>
</style>
